<template>
    <!-- 需求计划 -->
    <div id="demand" @scroll="scrollFoot">
        <div class="top">
            <van-nav-bar
                title="需求计划"
                left-arrow
                @click-left="$router.push('/')"
            />
        </div>

        <div class="add" @click="$router.push('/demandAdd')">发起需求收集</div>
        <div class="search">
            <van-cell-group>
                <van-field v-model="searchValue" placeholder="请输入搜索内容" />
            </van-cell-group>
            <img @click="search" src="../../assets/images/search.png" alt="" />
        </div>
        <div class="nothing" v-show="list.length == 0">
            <p>暂无数据</p>
        </div>
        <div
            @click="inDetail(item.id)"
            class="list-item"
            v-for="(item, index) in list"
            :key="index"
        >
            <p class="title">{{ item.title }}</p>
            <p>需求提交人：{{ item.submitter }}</p>
            <p>需求方单位：{{ item.unit }}</p>
            <p>需求分类一级：{{ item.classification_level }}</p>
            <p>需求分类二级：{{ item.classification_second_level }}</p>
            <!-- <p>需求板块：{{ item.plate }}</p> -->
            <p>需求期望实现日期：{{ item.date }}</p>
        </div>
    </div>
</template>

<script>
import { Toast } from "vant";
import api from "../../http/api";
export default {
    data() {
        return {
            // 当前页
            pageNum: 1,
            // 搜索内容
            searchValue: "",
            // 页面条数
            pageSize: 5,
            // 滚动
            scrollTime: null,
            // 列表数据
            list: [],
        };
    },
    watch: {},
    mounted() {
        // this.getList({ loginPhone: "111222333", id: -1, page: 1, size: this.size });
        this.getList({
            loginPhone: localStorage.phone,
            // loginPhone: "111222333",
            id: -1,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            query: "",
        });
    },
    methods: {
        // 滚动条触底事件
        scrollFoot(e) {
            // 获取需要绑定的dom事件对象
            const dom = e.target;
            dom.addEventListener("scroll", () => {
                // 简易节流
                if (this.scrollTime) {
                    return;
                } else {
                    // 滚动高度+可视区域高度=滚动的高度
                    if (
                        Math.ceil(dom.scrollTop + dom.clientHeight) ===
                        dom.scrollHeight
                    ) {
                        // console.log("触底了");
                        // 触底后需要操作的事件

                        this.pageNum++;
                        if (this.total > this.list.length) {
                            Toast.loading({
                                duration: 0, // 持续展示 toast
                                forbidClick: true,
                            });
                            // 获取数据
                            api.demand
                                .getList({
                                    loginPhone: localStorage.phone,
                                    id: -1,
                                    pageNum: this.pageNum,
                                    pageSize: this.pageSize,
                                    query: this.searchValue,
                                })
                                .then((res) => {
                                    Toast.clear();
                                    // console.log(res);
                                    if (res.data.code == 200) {
                                        this.list.push(...res.data.data.rows);
                                    }
                                });
                        }

                        // 在数据渲染完毕后延迟执行 让滚动条保持在加载的位置
                        this.$nextTick(() => {
                            dom.scrollTop = dom.scrollTop;
                        });
                        this.scrollTime = setTimeout(() => {
                            clearTimeout(this.scrollTime);
                            this.scrollTime = null;
                        }, 200);
                    }
                }
            });
        },

        /**
         * 搜索内容
         */
        search() {
            this.pageNum = 1;
            this.getList({
                loginPhone: localStorage.phone,
                id: -1,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                query: this.searchValue,
            });
        },
        // 获取列表
        getList(data) {
            Toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
            });
            api.demand.getList(data).then((res) => {
                // console.log(res);
                Toast.clear();
                if (res.data.code == 200) {
                    this.list = res.data.data.rows;
                    this.total = res.data.data.total;
                }
            });
        },
        /**
         * 点击进详情页
         * @param {string} id 本条数据的id
         */
        inDetail(id) {
            this.$router.push({
                path: "/demandDetails",
                query: {
                    id,
                },
            });
        },
    },
};
</script>

<style lang="less" scoped>
#demand {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #f5f5f5;
    overflow: scroll;
    padding-top: 51px;
    .nothing {
        color: #333;
        text-align: center;
        font-size: 16px;
    }
    .top {
        position: fixed;
        width: 100%;
        top: 0;
        overflow: hidden;
        background-color: white;
        z-index: 1;
    }
    .add {
        position: fixed;
        right: 10px;
        top: 13px;
        background: rgba(14, 134, 209, 0.2);
        border: 1px solid #0e86d1;
        border-radius: 5px;
        font-family: "ABeeZee";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 23px;
        padding: 0 4px;
        /* identical to box height, or 143% */

        text-align: center;
        letter-spacing: -0.24px;

        color: #0e86d1;
        z-index: 2;
    }
    .search {
        margin: 8px 10px;
        height: 33px;
        background: #ffffff;
        border-radius: 50px;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        /deep/ .van-cell-group {
            min-width: 80%;
        }
        img {
            width: 22px;
            height: 22px;
            margin: 5px 20px 5px 10px;
        }
    }
    .list-item {
        margin: 8px 10px;
        background: #ffffff;
        border-radius: 8px;
        padding: 12px 16px;
        overflow: hidden;
        .title {
            font-family: "Inter";
            font-style: normal;
            font-weight: 600;
            font-size: 16px;
            line-height: 19px;
            margin-bottom: 12px;
            color: #333333;
        }
        p {
            font-family: "Inter";
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 23px;
            color: #666666;
            margin: 0;
        }
    }
}
/deep/ .van-nav-bar__left {
    padding: 10px;
}
/deep/ .van-ellipsis {
    overflow: visible;
}
/deep/ .van-nav-bar__content {
    height: 51px;
}
/deep/ .van-nav-bar__title {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
    /* identical to box height, or 111% */

    text-align: center;
    letter-spacing: -0.24px;

    color: #333333;
}
/deep/ .van-nav-bar .van-icon {
    /* 文字颜色3 */

    color: #999999;
}
/deep/ .van-cell {
    padding: 0 10px;
    line-height: 33px;
}
</style>